<template>
  <div class="graphic-layout">
    <div v-if="navigator === 'mobile'" class="h5">
      <div class="d-content">
        <img :src="componentData.coverImage" alt="" />
        <p class="blue ft-30 ft-bold">{{ componentData.titleZh }}</p>
        <p class="ft-24 mt-12">
          {{ componentData.contentZh }}
        </p>
        <div class="btn">
          <div v-for="icon in componentData.icon" :key="icon.id" class="btn-item">
            <img :src="icon.url" alt="" />
            <span class="ft-8 mt-10">{{ icon.titleZh }}</span>
            <span class="ft-8">{{ icon.subtitleZh }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="pc">
      <div class="d-content">
        <img v-if="componentData.imgAlign === 'left'" :src="componentData.coverImage" alt="" />
        <div class="flex">
          <p class="blue ft-26 ft-bold">{{ componentData.titleZh }}</p>
          <p class="ft-16 mt-12">
            {{ componentData.contentZh }}
          </p>
          <div class="btn" :class="{ fr: componentData.imgAlign === 'left' }">
            <div v-for="icon in componentData.icon" :key="icon.id" class="btn-item">
              <img :src="icon.url" alt="" />
              <span class="ft-8 mt-10">{{ icon.titleZh }}</span>
              <span class="ft-8">{{ icon.subtitleZh }}</span>
            </div>
          </div>
        </div>
        <img v-if="componentData.imgAlign !== 'left'" :src="componentData.coverImage" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    componentData: {
      type: Object,
      default: () => ({}),
    },
    // 设备型号
    navigator: {
      type: String,
      default: '',
    },
  },
  data() {
    return {}
  },
  computed: {},
  methods: {},
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.graphic-layout {
  background-color: #fff;

  .h5 {
    position: relative;
    background-color: #fff;

    .d-content {
      background: #f6f7f9;
      margin: 0 12px 15px 12px;
      padding: 15px 12px;

      img {
        width: 100%;
        margin-bottom: 16px;
      }

      .btn {
        display: flex;
        font-size: 6px;
        color: #0261bc;
        justify-content: flex-end;
        margin-top: 10px;

        .btn-item {
          display: flex;
          flex-direction: column;
          text-align: center;
          margin-left: 10px;
          overflow: hidden;
          max-width: 42px;

          img {
            width: 22px;
            height: 22px;
            margin: 0 auto;
            filter: drop-shadow(#0261bc 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
            transform: translateX(-100px);
          }

          .ft-8 {
            font-size: 10px;
            line-height: 10px;
            margin-top: 4px;
            display: inline-block;
            zoom: 0.5;
          }

          .mt-10 {
            .mg(12, 0, 0, 0);
          }
        }
      }
    }

    .ft-30 {
      font-size: 15px;
    }

    .t-24 {
      font-size: 12px;
    }
  }

  .pc {
    background-color: #fff;
    border: 1px dashed #e0e4ec;
    position: relative;
    overflow: hidden;
    .width(1200);

    margin: 0 auto;

    .d-content {
      background: #f6f7f9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
      .pd(45, 0, 45, 0);
      .mg(0, 0, 30, 0);

      .flex {
        .width(580);
        .pd(0, 40, 0, 40);

        flex-direction: column;

        .ft-26 {
          .ft(26);
        }

        .ft-16 {
          .ft(16);
        }

        .mt-12 {
          .mg(12, 0, 0, 0);
        }

        .btn {
          display: flex;
          .ft(12);
          .mg(20, 0, 0, 0);

          color: #0261bc;

          &.fr {
            justify-content: flex-end;
          }

          .btn-item {
            display: flex;
            flex-direction: column;
            text-align: center;
            overflow: hidden;
            .maxWidth(90);
            .mg(0, 10, 0, 10);
            .ft(12);

            img {
              .width(50);
              .height(50);

              filter: drop-shadow(#0261bc 100px 0); // 在右侧 100px 加一个 #FFF 的阴影
              transform: translateX(-100px);
              margin-bottom: 0;
              margin: 0 auto;
            }

            .ft-8 {
              .ft(20);
              .lineH(20);
              .mg(8, 0, 0, 0);

              display: inline-block;
              zoom: 0.5;
            }

            .mt-10 {
              .mg(12, 0, 0, 0);
            }
          }
        }
      }

      img {
        .width(460);
        .height(260);
      }
    }
  }
}
</style>
